<template>
  <div class="event-layout">
    <div class="event-item">
      <div class="item-label">事件ID</div>
      <el-input v-model="eventFrom.id" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">事件名称</div>
      <el-input v-model="eventFrom.label"></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">触发方式</div>
      <el-input v-model="eventFrom.value" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">触发动作</div>
      <el-input v-model="eventFrom.action" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">请求地址</div>
      <el-input v-model="eventFrom.url" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">请求方式</div>
      <el-input v-model="eventFrom.method" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">请求参数</div>
      <el-input v-model="eventFrom.params" type="textarea"></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">鉴权字段</div>
      <el-input v-model="eventFrom.token" disabled></el-input>
    </div>
    <div class="event-item">
      <div class="item-label">触发后效果</div>
      <el-input v-model="eventFrom.token" disabled></el-input>
    </div>
  </div>
</template>

<script setup>
const eventFrom = ref({
  id: '',
  label: '事件1',
  value: 'click',
  action: 'SendRequest',
  method: 'post',
  url: 'http://localhost:8080/api/event/1',
  params: '',
  token: ''
})
const generateUUID = () => {
  let d = new Date().getTime();
  let d2 = (performance && performance.now && (performance.now() * 1000)) || 0;
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    let r = Math.random() * 16;
    if (d > 0) {
      r = (d + r) % 16 | 0;
      d = Math.floor(d / 16);
    } else {
      r = (d2 + r) % 16 | 0;
      d2 = Math.floor(d2 / 16);
    }
    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}
</script>

<style lang="scss">
.event-layout {
  border-top: 1px solid #317aee;
  padding: 1rem;

  .event-item {
    display: flex;
    padding: 0.5rem 0rem;

    .item-label {
      width: 8.88rem;
      line-height: 2.2rem;
      font-size: 1.1rem;
    }
  }

  .el-input.is-disabled .el-input__wrapper {
    background-color: #424242;
    box-shadow: none;
  }
}
</style>